<template>
    <div v-if="state.isShow">
        <el-dialog
            v-model="state.isShow"
            title="导入配置"
            width="45%"
            :before-close="handleClose"
            center
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <code-mirror ref="codeMirrorRef" :readOnly="false"/>
            <template #footer>
            <div class="footer">
                <el-button type="primary" @click="save">导入</el-button>
                <el-button @click="close">关闭</el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>

import { reactive, ref ,nextTick} from 'vue';
import codeMirror from '@/components/code-mirror/index.vue'
import { ElMessage } from 'element-plus';

const props = defineProps({
    designer:{
        type:Object,
        default:()=>({})
    }
})

const state = reactive({
    isShow:false
})
const codeMirrorRef = ref(null)

const close = ()=>{
    state.isShow = false
}

const handleClose = ()=>{
    close()
}
const openDialog = (val)=>{
    state.isShow = true
    nextTick(()=>{
        codeMirrorRef.value.setValue(val)
    })
}
const save = ()=>{
    let json = codeMirrorRef.value.getValue() ?? ''
    json = JSON.parse(json)

    if(!json.widgetList || !json.formConfig){
        // 不具备当前属性报错提示
        ElMessage({
            message: '请检查导入数据是否正确',
            type: 'warning',
        })
        return
    }

    props.designer.setFormJson(json)
    handleClose()
}

defineExpose({
    openDialog
})
</script>

<style lang='scss' scoped></style>